<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>添加商品（销售管理）</title>
	<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layui-panel laulayui-container">
	<div class="layui-row layui-col-space10" style="padding: 15px;">
		<!-- 查询商品列表 -->
		<div class="layui-col-md6">
			<div class="layui-row">
				<div class="layui-col-md12">
					<span>输入商品编号或名称查询：</span>
					<input type="text" id="proIdOrName" class="layui-input" style="width: 160px;display: inline-block;" placeholder="请输入"/>
					<div class="layui-btn layui-btn-sm" id="addPro">加入所选商品</div>
				</div>
				<!-- tab栏 -->
				<div class="layui-col-md12 layui-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">商品清单</li>
						<li>商品列表</li>
						<li>最近进货</li>
					</ul>
					<div class="layui-tab-content">
						<!-- 商品清单 -->
						<div class="layui-tab-item layui-show">
							<table id="proBill" lay-filter="proBill"></table>
						</div>
						<!-- 商品列表 -->
						<div class="layui-tab-item layui-row-col">
							<div id="proListTree" class="layui-col-md3" style="border-right:1px solid #eee;height:366px;overflow: auto"></div>
							<table id="proListInfo" class="layui-col-md9" lay-filter="proListInfo"></table>
						</div>
						<!-- 最近进货 -->
						<div class="layui-tab-item">
							<table id="recentPurchase" lay-filter="recentPurchase"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 所选商品 -->
		<div class="layui-col-md6">
			<b class="layui-inline layui-font-16">所选商品</b>
			<table id="selectProInfo" lay-filter="selectProInfo"></table>
			<script type="text/html" id="selectProBtn">
				<div class="layui-btn-container">
					<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
					<button class="layui-btn layui-btn-sm" lay-event="confirm">确认</button>
					<!-- <button class="layui-btn layui-btn-sm" lay-event="cancel">取消</button> -->
				</div>
			</script>
			<!-- ------------------------------------------------------------------------------ -->
			<!-- 设置所选商品中单价列颜色 -->
			<!-- <script type="text/html" id="editAbleTpl">
              <span>{{ d.city }}</span>
            </script> -->
			<!-- ------------------------------------------------------------------------------ -->
		</div>
	</div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    //声明一个用于保存所选商品的数组
    var chooseProInfoList = [];

    layui.use(['form', 'table', 'layer','tree','element','util'], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            tree = layui.tree,
			util = layui.util;

        /*window.nicolInfo = {
		    example:'111',
			flag:true
		}*/

        //保存表格实例
        var tableList = [];
        //保存弹出层的实例
        var indexList = [];

        //声明用于存储商品编号或名称的变量
		var proIdOrName = "";
		//获取查询输入框
		$('#proIdOrName').on('keyup',function () {
		    //获取输入框的值
			proIdOrName = $('#proIdOrName').val();
			//重载数据表格（商品清单）
			table.reload('proBill',{
                url: '/showProBillInfo/'+parent.inveDescDepot+'?proIdOrName='+proIdOrName
			});
        });

		//声明一个用于保存单选数据的变量
        var addProInfo;
        /* ---------- 商品清单 ---------- */
        tableList[0] = table.render({
            elem: '#proBill'
            ,height: 366
            ,url: '/showProBillInfo/'+parent.inveDescDepot+'?proIdOrName='+proIdOrName//数据接口
            ,cols: [[ //表头
                {field: 'proId', title: '商品编号', width:100/*, fixed: 'left'*/}
                ,{field: 'inveDescName', title: '商品名称', width:100}
                ,{field: 'inveDescUnit', title: '单位', width:100, sort: true}
                ,{field: 'inveDescSize', title: '规格', width: 100, sort: true}
                ,{field: 'inveDescPrice', title: '预设售价', width: 110, sort: true}
                ,{field: 'inveDescInventoryNum', title: '库存量', width: 100, sort: true}
                ,{field: 'inveDescManufacturer', title: '生产商', width: 100}
            ]],
            done: function (obj) {
                //默认获得第一条数据
                addProInfo = obj.data[0];
                //默认选中第一条
                $('.layui-table-view[lay-id="proBill"]')
                    .children('.layui-table-box')
                    .children('.layui-table-body')
                    .find('table tbody tr[data-index="0"]').click();
            },
            skin: 'line'
        });
        
        /* ---------- 商品列表 ---------- */
        // ① 左侧树形控件
        $.ajax({
			url: '/showProductTypeInfo',
			success: function (data) {
			    var treeData = JSON.parse(data);
                tree.render({
                    elem: '#proListTree',
					data: treeData,
                    onlyIconControl: true,	//只能通过节点左侧图标来展开收缩
					click: function (obj) {
                        //声明一个变量获取商品级别编号
                        var proTypeId = obj.data.id;
                        //刷新商品列表数据表格
						table.reload('proListInfo',{
						    url: '/showProListInfo/'+proTypeId
						})
                    }
                })
            }
		})

        // ② 右侧商品列表信息
        tableList[1] = table.render({
            elem: '#proListInfo'
            ,height: 366
			,url : '/showProListInfo/0000'
            ,page: false //开启or关闭分页
            ,cols: [[ //表头
                {field: 'proId', title: '商品编号', width:100/*, fixed: 'left'*/}
                ,{field: 'inveDescName', title: '商品名称', width:100}
                ,{field: 'inveDescUnit', title: '单位', width:100, sort: true}
                ,{field: 'inveDescSize', title: '规格', width: 100, sort: true}
                ,{field: 'inveDescPrice', title: '预设售价', width: 110, sort: true}
                ,{field: 'inveDescInventoryNum', title: '库存量', width: 100, sort: true}
                ,{field: 'inveDescManufacturer', title: '生产商', width: 100}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            skin: 'line'
        });

        var inveDescDepot  = parent.inveDescDepot;
        /* ---------- 最近进货 ---------- */
        tableList[2] = table.render({
            elem: '#recentPurchase'
            ,height: 366
            ,url: '/showRecentPurchaseInfo/'+inveDescDepot //数据接口
            ,page: false //开启or关闭分页
            ,cols: [[ //表头
                {field: 'proId', title: '商品编号', width:100/*, fixed: 'left'*/}
                ,{field: 'inveDescName', title: '商品名称', width:100}
                ,{field: 'inveDescInventoryNum', title: '数量', width:100, sort: true}
                ,{field: 'inveDescPrice', title: '单价', width: 100, sort: true}
                ,{field: 'inveDescUnit', title: '单位', width: 110, sort: true}
                ,{field: 'inveDescSize', title: '规格', width: 100, sort: true}
                ,{field: 'inveDescManufacturer', title: '生产厂商', width: 100, sort: true}
                ,{field: 'purStoDate', title: '进货日期', width: 100,
                    templet:"<div>{{layui.util.toDateString(d.purStoDate, 'yyyy-MM-dd')}}</div>"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            skin: 'line'
        });

        /* ---------- 所选商品 ---------- */
        tableList[3] = table.render({
            elem: '#selectProInfo'
            ,height: 450
            ,data: chooseProInfoList
            ,toolbar: '#selectProBtn' //操作按钮
            ,totalRow: true //开启合计行
            ,page: false //开启分页
            ,cols: [[ //表头
                {checkbox:true, fixed: 'left',field:'chooseTr'}
                ,{field: 'inveDescName', title: '商品名称', width:100, fixed: 'left'}
                ,{field: 'inveDescUnit', title: '单位', width:100, sort: true}
                ,{field: 'inveDescPrice', title: '单价', width:100, sort: true}
                ,{field: 'proDiscount', title: '折扣率', width: 100, sort: true}
                ,{field: 'proNum', title: '数量', width: 110, sort: true, totalRow: true}
                ,{field: 'proDescTotal', title: '总金额', width: 100, sort: true,totalRow: true}
                ,{field: 'inveDescBatchNum', title: '生产批号', width: 100}
                ,{field: 'inveDescStartDate', title: '生产日期', width: 110, sort: true}
                ,{field: 'inveDescValidityDate', title: '有效期至', width: 110, sort: true}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            skin: 'line'
        });

        //创建一个集合用于存储选中行的下标
        var trIndexList = [];
        //监听表格复选框选择
        table.on('checkbox(selectProInfo)', function(obj){
            //获取选中行的下标(从零开始)
            var trIndex = obj.tr.attr('data-index');
            //获取是否为全选
			var isAll = table.checkStatus('selectProInfo').isAll;

            //判断是全选则添加所有所选商品
            if(isAll){
                trIndexList = [];
                for(var i=0,len=chooseProInfoList.length;i<len;i++){
                    trIndexList.push(i);
				}
			}else if(undefined == trIndex){
                //判断是反选清空所有所选商品
                trIndexList = [];
			}else{
                //判断复选框的选中状态，进行增加 | 删除
                if(obj.checked){
                    //添加选中的下标至数组末尾
                    trIndexList.push(trIndex);
                }else{
                    //从数组中删除取消的一个元素
                    trIndexList.splice($.inArray(trIndex,trIndexList),1);
                }
			}
        });

        /* ---------- 【监听头部工具栏事件】所选商品(删除 | 确认) ---------- */
		table.on('toolbar(selectProInfo)',function (obj) {
            switch(obj.event){
                case 'del':
                    //升序排列
					trIndexList = trIndexList.sort();
                    if(null != trIndexList && 0<trIndexList.length){
                        layer.open({
                            content: '确认要删除选中的数据么',
                            yes: function(index, layero){
                                //循环遍历选中的行下标
                                for ( var i=0,len=trIndexList.length;i<len;i++ ) {
                                    //删除选中的数据行
                                    chooseProInfoList.splice(trIndexList[i], 1);
                                    //判断选中的行数大于一条且不是最后一条时，改变后一条的位置的值
                                    if (1 < trIndexList.length && i != trIndexList.length - 1) {
                                        //后一条前移(i+1)位
                                        trIndexList[i + 1] = trIndexList[i + 1] - 1 - i;
                                    }
                                }
                                //重载数据表格
                                table.reload('selectProInfo',{
                                    data:chooseProInfoList
                                });
                                //清空保存下标位置的数组
                                trIndexList = [];

                                //手动关闭弹窗
                                layer.close(index);
                            }
                        });
                    }else {
                        layer.msg('没有选择待删除的数据！',{time:500});
                    }
                    break;
				case 'confirm':
				    if(null != chooseProInfoList && 0!=chooseProInfoList.length){
				        //选择的商品信息
                        //parent.dataInfo = JSON.stringify(chooseProInfoList);
						//获取从所选商品数据表格中获取添加的商品信息并保存
						var proInfos = JSON.parse(JSON.stringify(chooseProInfoList));

                        // 声明一个变量判断是否符合选择添加的条件
                        var isFla = true;
                        //循环判断
                        for(var i=0,len=proInfos.length;i<len;i++){
                            isFla = true;
                            for(var j=0,lens=parent.chooseProInfoLists.length;j<lens;j++){
                                var proInfo = parent.chooseProInfoLists[j];
                                //数组中有批号、编号相同的商品则修改（单价、数量）
                                if(proInfo.inveDescBatchNum === proInfos[i].inveDescBatchNum
                                    && proInfo.proId === proInfos[i].proId){
                                    //修改单价
                                    proInfo.inveDescPrice = (+proInfo.inveDescPrice + +proInfos[i].inveDescPrice)/2;
                                    //修改数量
                                    proInfo.proNum = +proInfo.proNum + +proInfos[i].proNum;
                                    //修改折扣率
                                    proInfo.proDiscount = (+proInfo.proDiscount + +proInfos[i].proDiscount)/2;
                                    //修改总金额
                                    proInfo.proDescTotal = (+proInfo.inveDescPrice * +proInfo.proNum * +proInfo.proDiscount).toFixed(2);
                                    //更改判断条件
                                    isFla = false;
                                    //退出循环
                                    break;
                                }
							}
                            //数组中没有批号、编号相同的商品则添加
                            if ( isFla ) {
                                //加入到全局总列表中
                                parent.chooseProInfoLists.push(proInfos[i]);
                            }
						}

						//新增商品后设置出货仓库下拉列表为禁用状态
						$('#depot',window.parent.document).attr('disabled',true);
                        //重新渲染表单
						parent.layui.form.render();

                        //关闭弹窗
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
					}else{
				        layer.msg('没有选择的商品信息！')
					}
				    break;
            }
        });

        /* ---------- 监听单元格编辑 ---------- */
        /*table.on('edit(selectProInfo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[name: '+ data.inveDescName +'] ' + field + ' 字段更改值为：'+ util.escape(value),{zIndex:66666667});
        });*/

        /* ---------- 编辑商品的操作弹窗 ---------- */
        function editProduct(data) {
            //格式化生产日期和有效期
            data.inveDescStartDate = getFormatDate(data.inveDescStartDate);
            data.inveDescValidityDate = getFormatDate(data.inveDescValidityDate);

            //JSON格式对象 --> String对象
            window.productInfo = JSON.stringify(data);
            //声明全局的变量以供子窗体使用
            window.table = tableList[3];

            indexList[0] = layer.open({
                title: '商品信息（销售管理）',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '90%'],
                content: 'sell_editProduct.html',
                zIndex: 66666667
            });
        }
        
        /* ---------- 商品清单（编辑商品信息） ---------- */
        //双击行操作
        table.on('rowDouble(proBill)', function(obj){
            var data = obj.data;//JSON.stringify(data)

            // 区分编辑后刷新的表格
            window.editProductFlag = undefined;
            //调用编辑商品的弹窗方法
            editProduct(data);
        });
        //单击行操作
		table.on('row(proBill)',function (obj) {
		    //获取选中的数据
		    addProInfo = obj.data;
            //添加单击行样式
            obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green');
        });
		//加入所选商品按钮单击操作
		$('#addPro').on('click',function () {
            // 区分编辑后刷新的表格
            window.editProductFlag = undefined;
            //调用编辑商品的弹窗方法
            editProduct(addProInfo);
        })
		

        /* ---------- 商品列表（编辑商品信息） ---------- */
        table.on('rowDouble(proListInfo)', function(obj){
            var data = obj.data;//JSON.stringify(data)

            // 区分编辑后刷新的表格
            window.editProductFlag = undefined;
            //调用编辑商品的弹窗方法
            editProduct(data);
        });

        /* ---------- 最近进货（编辑商品信息） ---------- */
        table.on('rowDouble(recentPurchase)', function(obj){
            var data = obj.data;//JSON.stringify(data)

            // 区分编辑后刷新的表格
            window.editProductFlag = undefined;
            //调用编辑商品的弹窗方法
            editProduct(data);
        });

        /* ---------- 所选商品（编辑商品信息） ---------- */
        table.on('rowDouble(selectProInfo)', function(obj){
            var data = obj.data;//JSON.stringify(data)

            // 区分编辑后刷新的表格
            window.editProductFlag = false;
            //调用编辑商品的弹窗方法
            editProduct(data);
        });

        /* ---------- 日期格式的函数 ---------- */
        function getFormatDate(obj) {
            var date = new Date(obj);

            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();

            month = month<10 ? "0"+month : month;
            day = day<10 ? "0"+day : day;

            return year + "-" + month + "-" + day;
        }
    })
</script>
</body>
</html>
